<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统设置</el-breadcrumb-item>
      <el-breadcrumb-item>意见反馈</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
        <el-row :gutter="20">
         <el-col :span = "8">
            <el-button type="primary" @click="handleAddNewfeedtype()"
            >添加新类型</el-button>
        </el-col>
         <el-col :span = "8">
            <el-button type="primary" @click="deletefeedtypes()"
            >删除</el-button>
        </el-col>
      </el-row>

 <el-table :data="feedtypeList" border stripe @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="ID" prop="id"></el-table-column>

        <el-table-column label="类型名称" prop="name"></el-table-column>

        <el-table-column label="添加时间" prop="createTime">
          <template slot-scope="scope">
            {{ scope.row.createtime | dateFormat }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="240px">
          <template slot-scope="scope">
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="deletefeedtype(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.currentPage"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <el-dialog title="新增类型" :visible.sync="newDialogVisible" width="50%">
      <div>
        <label for="question">类型名称:</label>
        <el-input v-model="newfeedtype" placeholder="单行输入">
          </el-input>

      </div>

      <div>

        <el-button type="primary" @click="insertfeedtype()" icon="el-icon-search"
            >确定</el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>
export default {
  data () {
    return {
      // 查询条件
      queryInfo: {
        id: '',
        currentPage: 1,
        question: '',
        createtime: null,

        pageSize: 10

      },
      // 时间起始
      timeRange: {
        createtime: null
      },
      nowfeedtype: {},
      newfeedtype: '',
      // 标签列表
      feedtypeList: [],
      total: 0,
      showDialogVisible: false,
      newDialogVisible: false,

      selectedData: [],
      delids: []

    }
  },
  created () {
    // 加载页面时 加载一次数据
    this.getfeedtypeList(1)
  },
  methods: {
    async getfeedtypeList (page) {
      const { data: res } = await this.$http.get('feedtypes/all/' + page)
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.feedtypeList = res.data.records
      console.log(res.data.records)
      this.total = res.data.total
    },

    // 新增界面
    handleAddNewfeedtype () {
      this.newDialogVisible = true
    },

    // 表格 分页页数切换
    handleCurrentChange (newPage) {
      this.queryInfo.currentPage = newPage
      this.getfeedtypeList(newPage)
    },

    handleSizeChange (newSize) {
      this.queryInfo.pageSize = newSize
      this.getfeedtypeList(1)
    },

    handleSelectionChange (val) {
      this.selectedData = val
    },

    // 单行删除类型
    async deletefeedtype (id) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该类型, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((error) => error)

      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const { data: res } = await this.$http.delete('feedtypes/delete/' + id)
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.$message.success('删除标签成功')
      // 重新加载一次
      this.getfeedtypeList(this.queryInfo.currentPage)
    },

    // 批量删除类型
    async deletefeedtypes () {
      const length = this.selectedData.length

      console.log(this.selectedData)
      for (let i = 0; i < length; i++) {
        this.delids.push(this.selectedData[i].id)
      }

      console.log(this.delids)

      const confirmResult = await this.$confirm(
        '此操作将永久删除该类型, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((error) => error)

      if (confirmResult !== 'confirm') {
        this.delids = []
        return this.$message.info('已取消删除')
      }
      const { data: res } = await this.$http.post(
        'feedtypes/multidelete', this.delids)

      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.$message.success('删除标签成功')
      // 重新加载一次
      this.getfeedtypeList(this.queryInfo.currentPage)
      this.delids = []
    },

    // 新增

    async insertfeedtype () {
      const { data: res } = await this.$http.post(
        'feedtypes/insert',
        { 'name': this.newfeedtype }, {
          headers: {
            'content-type': 'application/json',
            'X-Request-With': 'XMLHttpRequest',
            'token': window.sessionStorage.getItem('token')
          }
        }
      )
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.newDialogVisible = false
      this.getfeedtypeList(this.queryInfo.currentPage)
      // this.nowfeedtype = res.data
      // console.log(res.data.records)
    }

  },
  filters: {

  }
}
</script>

<style lang="less" scope>
</style>
